import React, { PureComponent, Fragment } from 'react';
import { Form, Button, InputNumber, Select, notification } from 'antd';
import { connect } from 'dva';

import "./form.less"
class Calculate extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            maxPk: 999999,
            minPk: 0,
            loading: false,
            elevation: "",
            groundElevation: "",
            pierHeight: "",
            roadList: [],
            spanList: []
        }
        this.calculate = this.calculate.bind(this)
        this.selectRoad = this.selectRoad.bind(this)
        this.onConfirm = this.onConfirm.bind(this)
        this.validator = this.validator.bind(this)
    }
    async componentDidMount() {
        const { current,loadProjectRoads,onLoaded } = this.props;
        if (onLoaded) {
            onLoaded(this);
        }
       
        let data = await loadProjectRoads({ projectId: current.id })
        if (data) {
            this.setState({
                roadList: data.res
            })
        }
    }
    async selectRoad(e) {
        let res = await this.props.queryRoadLimit({ id: e })
        if (res) {
            this.setState({
                maxPk: res.maxPk,
                minPk: res.minPk
            })
        }
    }
    onConfirm(params = {}) {
        return new Promise((resolve, reject) => {
            if (params.onSuccess) {
                params.onSuccess(bridge);
            }
            resolve()
        })
    }
    validator(rule, value, callback) {
        const { maxPk, minPk } = this.state;
        try {
            if (value - maxPk > 0 || value - minPk < 0) {
                callback("不在线路里程范围之内!")
            }
        } catch (err) {
            callback(err);
        }
        callback()
    }
    calculate(e) {
        const {form,calculatePierHeight}=this.props;
        e.preventDefault();
        this.setState({
            loading: true
        })
        form.validateFields(async (error, values) => {
            if (!error) {
                let res = await calculatePierHeight(values, res => {
                    const { elevation, groundElevation, pierHeight } = res.data.data
                    this.setState({
                        loading: false,
                        elevation,
                        groundElevation,
                        pierHeight
                    })
                }, err => {
                    this.setState({
                        loading: false,
                    })
                })
            } else {
                this.setState({
                    loading: false,
                })
            }
        })

    }
 
    render() {
        const { roadList, loading, elevation, groundElevation, pierHeight } = this.state
        const { getFieldDecorator } = this.props.form;
        return (
            <Form
                style={{ marginTop: "20px" }}
                labelAlign="right"
                labelCol={{ span: 9 }}
                wrapperCol={{ span: 15 }}
            >
                <Form.Item
                    className="half"
                    label='路线'>
                    {getFieldDecorator('roadlineId', {
                        rules: [
                            { required: true, message: '请填写路线' }
                        ]

                    })(
                        <Select onSelect={this.selectRoad} showSearch filterOption={(input, option) =>
                            option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                        } placeholder="请选择路线">
                            {roadList && roadList.length > 0 ? roadList.map((r, i) => (
                                <Select.Option key={r.id} value={r.id}>{r.name}</Select.Option>
                            )) : ''}
                        </Select>
                    )}
                </Form.Item>
                <Form.Item
                    className="half"
                    label='里程(m)'>
                    {getFieldDecorator('station', {
                        rules: [
                            { required: true, message: '请填写里程' },
                            {
                                validator: this.validator
                            }
                        ]

                    })(
                        <InputNumber placeholder="请输入里程" />
                    )}
                </Form.Item>

                <Form.Item
                    className="half"
                    label='主梁高度(mm)'>
                    {getFieldDecorator('GBHeight', {
                        rules: [
                            { required: false, message: '请填写主梁高度' }
                        ],
                        initialValue: 0

                    })(
                        <InputNumber placeholder="请输入主梁高度" />
                    )}
                </Form.Item>
                <Form.Item
                    className="half"
                    label='盖梁高度(mm)'>
                    {getFieldDecorator('COBHeight', {
                        rules: [
                            { required: false, message: '请填写盖梁高度' }
                        ],
                        initialValue: 0

                    })(
                        <InputNumber placeholder="请输入盖梁高度" />
                    )}
                </Form.Item>
                <Form.Item
                    className="half"
                    label='墩身高度偏差值(mm)'>
                    {getFieldDecorator('otherHeight', {
                        rules: [
                            { required: false, message: '请填写墩身高度偏差值' }
                        ],
                        initialValue: 0

                    })(
                        <InputNumber placeholder="请输入墩身高度偏差值" />
                    )}
                </Form.Item>
                <Form.Item
                    className="half"
                    label='支座高度(mm)'>
                    {getFieldDecorator('BERHeight', {
                        rules: [
                            { required: false, message: '请填写支座高度' }
                        ],
                        initialValue: 500

                    })(
                        <InputNumber type="number" placeholder="请输入支座高度" />
                    )}
                </Form.Item>
                <Button onClick={this.calculate} loading={loading} style={{ width: "60%", marginLeft: "50%", transform: "translateX(-50%)", overflow: 'hidden' }} block type="primary">计算</Button>
                <div className="calRes">
                    <div>桥面标高:{elevation ? elevation + '(m)' : '待计算'}</div>
                    <div>地面标高:{groundElevation ? groundElevation + '(m)' : '待计算'}</div>
                    <div>墩身高度:{pierHeight ? pierHeight + '(mm)' : '待计算'}</div>
                </div>
            </Form>
        )
    }
}
export default connect(
    ({ project: { current } }) => ({ current }),
    dispatch => ({
        loadProjectRoads: (values) => dispatch({
            type: 'refRoads/loadProjectRoads',
            payload: values
        }),
        queryRoadLimit: (values) => dispatch({
            type: 'bridge/queryRoadLimit',
            payload: values
        }),
        calculatePierHeight: (values, onSuccess, onError) => dispatch({
            type: 'bridge/calculatePierHeight',
            payload: {
                values,
                onSuccess,
                onError
            }
        }),
    })
)(Form.create('Calculate', {

})(Calculate));